<template>
    <div class="controlPanel">
        <template v-if="props.sources == '0'">
            <el-row class="marginTop20">
                <el-col :span="8" v-if="showTimeTool">
                    <el-row justify="end" align="middle">
                        <el-col :span="4" class="text-right">日期类型:</el-col>
                        <el-col :offset="1" :span="3"> 
                            <el-select v-model="dataType" @change="handleDataTypeChange">
                                <el-option label="日" value="3"/>
                                <el-option label="月份" value="5"/>
                                <el-option label="季度" value="10"/>
                                <el-option label="年份" value="15"/>
                            </el-select>
                        </el-col>
                        <el-col :span="16">
                            <el-date-picker v-model="timePeriod" :type="pickerDaterange" :value-format="valueFormat" :format="pickerDateFormat" 
                            start-placeholder="选择开始时间" end-placeholder="选择结束日期" @change="changeTimePeriod" style="width:100%;"/>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="4" v-if="showBoxTool">
                    <el-row justify="center" align="middle">
                        <el-col :span="4">箱型</el-col>
                        <el-col :span="12">
                            <el-select v-model="boxType" @change="handleBoxType">
                                <el-option label="全部" value="1"/>
                                <el-option label="40HQ" value="5"/>
                                <el-option label="40GP" value="10"/>
                                <el-option label="20HQ" value="15"/>
                                <el-option label="20GP" value="20"/>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="4" v-if="showBoxTool">
                    <el-row justify="center" align="middle"> 
                        <el-col :span="4">箱况</el-col> 
                        <el-col :span="12">
                            <el-select v-model="boxCondition" @change="handleBoxCondition">
                                <el-option label="全部" value="1"/>
                                <el-option label="全新" value="5"/>
                                <el-option label="次新" value="10"/>
                                <el-option label="适货" value="15"/>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6" v-if="showSortByField">
                    <el-row justify="center" align="middle"> 
                        <el-col :span="4">排序对象</el-col> 
                        <el-col :span="12">
                            <el-select v-model="sortByField" @change="handleSortByField">
                                <el-option label="正常待还数量" value="5"/>
                                <el-option label="超期待还箱数量" value="10"/>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6" v-if="showCompanyName">
                    <div class="text-ellipsis">{{companyName}}</div>
                </el-col>
            </el-row>
        </template>
        <template v-if="props.sources == '1'">
            <el-row class="marginTop20" align="middle">
                <el-col :span="11" v-if="showTimeTool">
                    <el-row justify="end" align="middle">
                        <el-col :span="5" class="text-right">日期类型:&nbsp;</el-col>
                        <el-col :span="4"> 
                            <el-select v-model="dataType" @change="handleDataTypeChange">
                                <el-option label="日" value="3"/>
                                <el-option label="月份" value="5"/>
                                <el-option label="季度" value="10"/>
                                <el-option label="年份" value="15"/>
                            </el-select>
                        </el-col>
                        <el-col :span="15">
                            <el-date-picker v-model="timePeriod" :type="pickerDaterange" :value-format="valueFormat" :format="pickerDateFormat" 
                            start-placeholder="选择开始时间" end-placeholder="选择结束日期" @change="changeTimePeriod" style="width:100%;"/>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3" v-if="showBoxTool">
                    <el-row justify="center" align="middle">
                        <el-col :offset="1" :span="7" class="text-right">箱型:</el-col>
                        <el-col :span="16">
                            <el-select v-model="boxType" @change="handleBoxType">
                                <el-option label="全部" value="1"/>
                                <el-option label="40HQ" value="5"/>
                                <el-option label="40GP" value="10"/>
                                <el-option label="20HQ" value="15"/>
                                <el-option label="20GP" value="20"/>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3" v-if="showBoxTool">
                    <el-row justify="center" align="middle"> 
                        <el-col :offset="1" :span="7" class="text-right">箱况:</el-col> 
                        <el-col :span="16">
                            <el-select v-model="boxCondition" @change="handleBoxCondition">
                                <el-option label="全部" value="1"/>
                                <el-option label="全新" value="5"/>
                                <el-option label="次新" value="10"/>
                                <el-option label="适货" value="15"/>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="5" v-if="showSortByField">
                    <el-row justify="center" align="middle"> 
                        <el-col :span="8" class="text-right">排序对象:</el-col> 
                        <el-col :span="16">
                            <el-select v-model="sortByField" @change="handleSortByField">
                                <el-option label="正常待还数量" value="5"/>
                                <el-option label="超期待还箱数量" value="10"/>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :offset="1" :span="6" v-if="showCompanyName" class="">
                    <div class="text-ellipsis">{{companyName}}</div>
                </el-col>
            </el-row>
        </template>
    </div>
</template>
<script lang="ts" setup>
import {ref, onMounted} from 'vue'
const emits = defineEmits(['updateValue'])

const dataType = ref("3") //数据类型: 3-日 5-月份 10-季度 15-年份
const timePeriod = ref([]) // 选择出的日期区间数组
const pickerDaterange = ref('daterange')  // 日期选择插件的类型
const pickerDateFormat = ref('YYYY-MM-DD') // 日期选择插件 日期显示格式
const valueFormat = ref('YYYYMMDD')// 日期选择插件 日期输出格式
const refType = ref("5") //账单业务类型 5-租箱  10-回调 20-售箱 25-购箱 30-代管箱
const currency = ref("USD") // 账单币种


const boxType = ref("1") //(5-40HQ 10-40GP 15-20HQ 20-20GP)
const boxCondition = ref("1") //(5-全新 10-次新 15-适货)
const sortByField = ref("5") //排序字段(5-正常待还箱量 10-超期待还箱量)
onMounted(()=>{ 
    console.log("props.timePeriod",props.timePeriod)
    timePeriod.value = props.timePeriod
    // if(props.timePeriod.length == 2){
    //     timePeriod.value.push(props.timePeriod[0])
    //     timePeriod.value.push(props.timePeriod[1])
    // }
})

const props = defineProps({
  // 父组件传递的参数
  dataType: {  // 数据类型
    type: String,
    default: '3'
  },
  timePeriod:{  // 时间区间
    type: Array,
    default: []
  },
  refType: {  // 账单业务类型
    type: String,
    default: '5'
  },
  currency: {  // 账单币种
    type: String,
    default: 'USD'
  },
  isShow: {  // 是否显示
    type: Boolean,
    default: false
  },
  showTimeTool:{ // 是否显示时间工具
    type: Boolean,
    default: false
  },
  showBoxTool:{ // 是否显示箱型工具
    type: Boolean,
    default: false
  },
  showSortByField:{ // 是否显示排序对象
    type: Boolean,
    default: false
  },
  showCompanyName:{// 是否显示公式名称
    type: Boolean,
    default: false
  },
  companyName:{ // 公司名称
    type: String,
    default: ''
  },
  sources:{ //引用来源
    type: String,
    default: '0'
  }
})

const handleDataTypeChange = (val:string)=>{
 switch (val) {
    case "3":
        pickerDaterange.value = 'daterange'
        pickerDateFormat.value = 'YYYY-MM-DD'
        valueFormat.value = 'YYYYMMDD'
        break;
    case "5":
        pickerDaterange.value = 'monthrange'
        pickerDateFormat.value = 'YYYY-MM'
        valueFormat.value = 'YYYYMM'
        break;
    case "10":
        pickerDaterange.value = 'monthrange'
        pickerDateFormat.value = 'YYYY-第Q季度'
        valueFormat.value = 'YYYYQ'
        break;
    case "15":
        pickerDaterange.value = 'yearrange'
        pickerDateFormat.value = 'YYYY'
        valueFormat.value = 'YYYY'
        break;
    default:
        break;
 }
//  emits("updateValue",getNewData())
}
const changeTimePeriod = (val)=>{
    emits("updateValue",getNewData())
    // dataLine()
    // console.log("timePeriod.value",timePeriod.value)
    // console.log("timePeriod",val)
}
const handleRefTypeChange = (val) => {
    emits("updateValue",getNewData())
}
const handleCurrencyChange = (val) => {
    emits("updateValue",getNewData())
}

const handleBoxType = (val) => { 
    emits("updateValue",getNewData())
}
const handleBoxCondition = (val) => { 
    emits("updateValue",getNewData())
}
const handleSortByField = (val) => { 
    emits("updateValue",getNewData())
}
const getNewData = () =>{ 
    return {
        dataType:dataType.value,
        timePeriod:timePeriod.value,
        boxType:boxType.value,
        boxCondition:boxCondition.value,
        sortByField:sortByField.value
    }
}

// 获取日期
const getCurrentDate = (type:any)=>{ //current:当前日期  30:30天之后的日期
    let year:number
    let month =''
    let day =''
    const now = new Date();
    let standardTime = new Date()
    if(type == 'current'){
        standardTime = now
    }else{ 
        const futureDate = new Date(now);
        futureDate.setDate(now.getDate() + type);
        standardTime = futureDate
    }
    year = standardTime.getFullYear();
    month = String(standardTime.getMonth() + 1).padStart(2, '0'); // 月份从0开始
    day = String(standardTime.getDate()).padStart(2, '0'); 
    return `${year}${month}${day}`;
    
}

</script>
<style lang="scss" scoped></style>